<template>
	<view class="contont">
		<nav-bar :title="title" :iconLeft="true" />
		<view class="content-bgc">
			<view class="b-con">
				<view style="margin-top: 20rpx;">
					<up-cell-group :border="false">
						<up-cell title="委外加工单号">
							<template #value>
								<view class="cell-text">{{ detail_record.code }} </view>
							</template>
						</up-cell>
						<up-cell title="委外加工商">
							<template #value>
								<view class="cell-text">{{ detail_record.processor_name }} </view>
							</template>
						</up-cell>
						<up-cell title="下单日期">
							<template #value>
								<view class="cell-text">{{ detail_record.order_date }}</view>
							</template>
						</up-cell>
						<up-cell title="交货日期">
							<template #value>
								<view class="cell-text">{{ detail_record.delivery_date }}</view>
							</template>
						</up-cell>
						<up-cell title="备注">
							<template #value>
								<view class="cell-text" style="width: 70%;">{{ detail_record.desc }}</view>
							</template>
						</up-cell>
					</up-cell-group>
				</view>
			</view>
			<view class="b-con">
				<up-cell-group :border="false">
					<up-cell :isLink="true" :border="false" :title="`产品：总数量（${car_list.length}）`" @click="car_popupShow = true">
						<template #value>
							<view class="cell-text">点击查看 </view>
						</template>
					</up-cell>
				</up-cell-group>
			</view>
			<custom-popup :popupShow="car_popupShow" mode="bottom" :title="'产品'" class="car-popup-custom"
				@close="car_popupShow = false" height="70vh">
				<z-paging ref="paging_car" v-if="car_popupShow" :refresher-enabled="false" :loading-more-enabled="false" :fixed="false" v-model="car_list"
					@query="queryList_car">
					<uni-card v-for="(item, index) in car_list" :key="index" :title="item.name" :sub-title="item.code"
						margin="5px" spacing="0">
						<view class="ctent">规格：{{ item.specification }}</view>
						<view class="con" style="align-items: normal;">
							<view class="ctent" style="flex: none;">仓库【库存】：</view>
							<view class="ctent">{{ item.inventory_info }}</view>
						</view>
						<view class="ctent" style="color:blue;text-decoration: underline;" @click="bomAct(item)">BOM数量：{{
							item.bom_num }}
						</view>
						<view class="ctent">基本单位销售价(元)：{{ item.unit_main_price }}</view>
						<view class="con">
							<view class="ctent">加工数量：{{ item.num }}</view>
							<view class="ctent">发料数量：{{ item.f_num }}</view>
						</view>
						<view class="con">
							<view class="ctent">加工单价(元)：{{ item.machining_price }}</view>
						</view>
					</uni-card>
				</z-paging>
				<custom-popup :popupShow="bom_popupShow" mode="center" :title="proName + '的【BOM】'" width="96%" height="60%"
					class="car-popup-custom" @close="bom_popupShow = false" :closeOnClickOverlay="false">
					<z-paging ref="paging" :fixed="false" :refresher-enabled="false" :loading-more-enabled="false">
						<uni-card v-for="(item, index) in bom_dataList" :key="index" :title="item.name" margin="5px" spacing="0">
							<view class="con">
								<view class="ctent">用量：{{ item.num }}</view>
								<view class="ctent">损耗率：{{ item.loss }}%</view>
							</view>
							<view class="ctent">采购价(元)：{{ item.default_supplier_price }}</view>
						</uni-card>
					</z-paging>
				</custom-popup>
			</custom-popup>
		</view>
	</view>
</template>
<script setup>
import { ref, reactive } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import enOrderApi from '../../../api/entrust/en_order'

const detail_record = ref({})
const title = '委外加工单详情';
onLoad(option => {
	get_detail(option.id);
})

function get_detail(id) {
	enOrderApi.machining_detail(id).then(data => {
		detail_record.value = data
		car_list.value = data.machining_products.map(v => {
			const bom_list = JSON.parse(v.product.bom_info)
			const bom_num = bom_list.bom_info.reduce((total, item) => {
				return total + (Number(item.num) || 0)
			}, 0)
			return {
				id: v.product.id,
				code: v.product.code,
				name: v.product.name,
				specification: v.product.specification,
				bom_num: bom_num,
				bom_info: v.product.bom_info,
				unit_main_price: v.product.unit_main_price,
				num: v.num,
				f_num: bom_num * v.num,
				machining_price: v.machining_price,
				craft: v.craft,
				inventory_info: v.product.stock_info.map(v => (`${v.warehouse_name}【${v.unit_info}】`)).join('、'),
			}
		})
	})
}


const car_popupShow = ref(false)
const car_list = ref([])
const paging_car = ref(null)
function queryList_car() {
	paging_car.value.complete(car_list.value);
}

const proName = ref('')
const bom_dataList = ref([])
const bom_popupShow = ref(false)
function bomAct(item) {
	proName.value = item.name
	bom_dataList.value = JSON.parse(item.bom_info).bom_info
	bom_popupShow.value = true
}
</script>

<style lang="scss"></style>